<!-- 此头部为首页外的其他页面引用，首页头部特殊，代码写在首页html内部-->
<head>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1880297_9n3ct6ou96o.css"/>
</head>
<div class="heads">
  <div class="main_md pc">
    <div class="head_inner">
        <div class="head_list">
          <ul>
            <li class="shouye"><a href="#"> <img src="images/index/shouye.png" alt=""/> </a></li>
            <li><a href="#"> 品牌动态</a></li>
            <li><a href="#"> 课程体系</a></li>
            <li><a href="#"> 家庭养育</a></li>
            <li><a href="#"> 加盟合作</a></li>
            <li><a href="#"> 教具包</a></li>
            <li><a href="#"> 游学研学</a></li>
            <li><a href="#"> 在线课堂</a></li>
          </ul>
        </div>
        <div class="head_img">
          <a href="#"> <img src="images/index/logo.png" alt=""/> </a>
        </div>
    </div>
  </div>
  <div class="ph">
    <div class="navmain">
      <div class="head_phone">
        <div class="ph-logo lf">
          <a href="#">
            <img src="images/index/logo.png" alt=""/>
          </a>
        </div>
        <div class="top_cen rt">
          <a href="javascript:;" class="cen_k">
            <span></span>
            <span></span>
            <span></span>
          </a>
          <a class="cen_x active" >×</a>
        </div>
        <ul class="navlist_mo">
          <li>
            <a href="#">网站首页</a>
          </li>
          <li>
            <a href="#">品牌动态</a>
          </li>
          <li>
            <a href="#">课程体系</a>
          </li>
          <li>
            <a href="#">家庭养育</a>
          </li>
          <li>
            <a href="#">加盟合作</a>
          </li>
          <li>
            <a href="#">教具包</a>
          </li>
          <li>
            <a href="#">游学研学</a>
          </li>
          <li>
            <a href="#">在线课堂</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

</div>

  <script>
  $(function(){
    /*导航下拉宽度控制*/
    //点击切换导航栏按钮  手机端
    $('.head_phone').on('click','.top_cen a',function(){
      if($(this).attr('class')!='active'){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
      }else{
        $(this).removeClass('active');
        $(this).siblings().addClass('active');
      }
      if($(this).attr('class')!='cen_x active'){
        $('body').css('right','50%');
        $('.nav_bg').fadeIn();
        $('.navlist_mo').css('right','0');
      }else{
        $('body').css('right','0');
        $('.nav_bg').fadeOut();
        $('.navlist_mo').css('right','-50%');
      }
    });
    //侧边栏点击切换效果  手机端
    $('.head_phone').on('click','.mo>a',function(){
      if($(this).parent().attr('class')!='mo active'){
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }else{
        $(this).parent().removeClass('active');
      }
    });
    /*三级*/
    $('.abm_nav li h3').on('click',function(){
      if($(this).parent().attr('class')!='active'){
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }else{
        $(this).parent().removeClass('active');
      }
    })
  })
</script>
















